<template>
    <div class="acti_set_box">
        <el-form
            ref="formRef"
            :rules="formRules"
            class="form"
            :model="formData"
            label-width="120px"
            :disabled="pageType == 'look'">
            <el-form-item label="活动封面设置">
                <el-radio-group v-model="formData.poster_type" @change="changeRadio">
                    <el-radio :label="0">封面模版</el-radio>
                    <el-radio :label="1">海报库</el-radio>
                    <el-radio :label="2">自定义</el-radio>
                </el-radio-group>
                <el-form-item :prop="formData.poster_type == 1 ? 'poster_id' : 'absolute_url'">
                    <el-button v-if="formData.poster_type == 1" @click="onPoster">选择海报</el-button>
                    <UploadImg
                        v-if="formData.poster_type == 2"
                        button-name="本地上传"
                        :rule="{
                            type: 'jpg|JPG|jpeg|JPEG|png|PNG',
                            unit: 'MB',
                            size: 5
                        }"
                        :url="formData.absolute_url"
                        @submit="v => ((formData.absolute_url = v), (upPoster = v))" />
                    <div class="text">图片支持JPG、PNG、JPEG格式，大小5M以内。</div>
                </el-form-item>
            </el-form-item>
            <el-form-item label="口令设置">
                <el-radio-group v-model="formData.password_type">
                    <el-radio :label="1">随机口令</el-radio>
                    <el-radio :label="2">自定义</el-radio>
                </el-radio-group>
                <el-form-item v-if="formData.password_type == 2" prop="password_url">
                    <el-button @click="onImportShow">导入口令</el-button>
                </el-form-item>
            </el-form-item>
            <el-form-item label="领取按钮文案" prop="receive_desc">
                <el-input v-model="formData.receive_desc" maxlength="8" show-word-limit placeholder="请输入" />
            </el-form-item>
        </el-form>
        <div class="phone_box">
            <ActivityPhone :absolute_url="formData.absolute_url" :receive_desc="formData.receive_desc" />
            <div
                v-if="false"
                :class="['phone', formData.absolute_url && 'position']"
                :style="'background-image: url(' + formData.absolute_url + ')'">
                <img :src="formData.absolute_url" class="default_bg" alt="" />
                <!-- <div v-if="!formData.absolute_url" class="default_bg"></div> -->
                <!-- <div class="title_box">
          <el-icon><close-bold /></el-icon>
          <h3 class="title_r">{{ redInfo.title }}</h3>
        </div> -->
                <div class="content_box">
                    <div class="inp_box">请输入口令</div>
                    <div class="alert_box">当前口令不正确请重新输入</div>
                    <div class="btn_box">
                        {{ formData.receive_desc }}
                    </div>
                </div>
                <div class="footer">
                    <div class="border"></div>
                </div>
            </div>
        </div>
    </div>
    <Dialog :app-dialog="appDialog">
        <div class="dia_text">
            1、根据导入模板进行填写，
            <el-link type="primary" :underline="false" @click="onDown">下载模板</el-link>
        </div>
        <div class="dia_text">
            2、上传填写好的模板，以便导入口令
            <el-upload action="" :on-change="handleFile" class="file" :auto-upload="false" :on-remove="RemoveFile">
                <el-link type="primary" :underline="false"> &ensp;&ensp;上传模板</el-link>
            </el-upload>
        </div>
        <div v-if="formData.password_file_name" class="file_info">
            <img src="@/assets/image/customer/xls_icon.png" alt="" />
            <div>{{ formData.password_file_name }}</div>
            <el-icon class="del_icon" @click="RemoveFile"><circle-close /></el-icon>
        </div>
    </Dialog>
    <ChoosePoster ref="ChoosePosterRef" @save="getPoster" />
</template>

<script setup lang="ts">
import UploadImg from '@/view/smartMarketing/components/UploadImg.vue';
import { ref, reactive, defineExpose, withDefaults, defineProps } from 'vue';
import { useRoute } from 'vue-router';
import { uploadFile2 } from '@/api/common';
import { passwordTemDownload, passwordCheckUpload } from '@/api/smartMarketing/order';
import { ElMessage } from 'element-plus';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import ChoosePoster from '@/view/content/highMaterial/poster/components/ChoosePoster.vue';
import Dialog from '@/components/Dialog.vue';
import ZWUpload from '@/components/ZWUpload.vue';
import ActivityPhone from '@/components/zw/phonePreview/activityPhonePreview/interact/index.vue';
interface Props {
    pageType: any;
}
const props = withDefaults(defineProps<Props>(), {
    pageType: ''
});
const emit = defineEmits(['submit']);
const route = useRoute();
const redInfo = ref({
    title: '',
    red_num: 0
});
const ChoosePosterRef: any = ref(null);
const formRef = ref<any>(null);
const selectedPoster = ref<any>(null); // 维护选择海报数据
const upPoster = ref<any>(null); // 维护上传海报数据
const formData = ref({
    poster_type: 0, //海报类型 1-海报库 2-本地
    poster_id: '', //海报id(poster_type=1必传)
    absolute_url: 'https://static.scrm.keyid.cn/assets/images/web-pc/WechatIMG786.jpeg', //xxx, //上传海报地址(poster_type=2必传)
    password_type: 1, //口令类型 1-随机口令 2-自定义口令
    password_url: '', //xxx, //口令链接(password_type=2必传)
    receive_desc: '拆',
    password_file_name: ''
});
const formRules = {
    poster_id: [{ required: false, message: '请选择海报', trigger: 'change' }],
    absolute_url: [{ required: false, message: '请上传海报', trigger: 'change' }],
    password_url: [{ required: true, message: '请上传自定义口令', trigger: 'change' }],
    receive_desc: [{ required: true, message: '请输入领取按钮文案', trigger: 'blur' }]
};
const changeRadio = (value: any) => {
    const defaultImg = 'https://static.scrm.keyid.cn/assets/images/web-pc/WechatIMG786.jpeg';
    switch (value) {
        case 0:
            formData.value.absolute_url = defaultImg;
            break;
        case 1:
            formData.value.absolute_url = selectedPoster.value || defaultImg;
            break;
        case 2:
            formData.value.absolute_url = upPoster.value || '';
            break;
    }
};
// 选择海报库
const onPoster = () => {
    ChoosePosterRef.value.appDialog.visible = true;
};
const getPoster = (val: any) => {
    formData.value.poster_id = val.idList[0];
    formData.value.absolute_url = val.list[0].poster_url;
    selectedPoster.value = val.list[0].poster_url;
    // postersURL.value = val.list[0].poster_url;
};
// 删除海报
const handleRemove: UploadProps['onRemove'] = () => {
    formData.value.absolute_url = '';
};
// 上传海报
const handleChange: UploadProps['onChange'] = async (file: any) => {
    if (file.size / 1024 / 1024 > 10) {
        ElMessage.error('上传海报大小不能超过10M');
        return false;
    }
    const res = await uploadFile2({
        file: file.raw,
        fileName: file.name
    });
    formData.value.absolute_url = res.url;
    upPoster.value = res.url;
};
const cancelHandel = () => {
    appDialog.visible = false;
};
const submitHandel = () => {
    appDialog.visible = false;
};

const appDialog = reactive({
    visible: false,
    title: '导入口令',
    width: '600px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});
const onImportShow = () => {
    appDialog.visible = true;
};
const onDown = async () => {
    const res = await passwordTemDownload({});
    window.open(res.url);
};

// file文件上传
const handleFile: UploadProps['onChange'] = async (file: any) => {
    const res = await uploadFile2({
        file: file.raw,
        fileName: file.name
    });
    // 口令校验
    let params = {};
    if (props.pageType) {
        params = {
            red_num: redInfo.value.red_num,
            password_url: res.url,
            activity_id: route.query.id
        };
    } else {
        params = {
            red_num: redInfo.value.red_num,
            password_url: res.url
        };
    }
    await passwordCheckUpload(params);
    formData.value.password_file_name = res.name;
    formData.value.password_url = res.url;
};
// 删除口令文件
const RemoveFile = () => {
    formData.value.password_file_name = '';
    formData.value.password_url = '';
};
const onSubmit = async () => {
    if (!formRef.value) return;
    await formRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            emit('submit');
        } else {
            ElMessage.warning(Object.values(fields)[0][0].message);
        }
    });
};
// 编辑时区分海报类型并将图片链接维护到变量中，1——选择海报，2——上传海报
const getPosterUrl = (type: number, url: string) => {
    if (type === 1) {
        selectedPoster.value = url;
    } else if (type === 2) {
        upPoster.value = url;
    }
};
defineExpose({
    onSubmit,
    formData,
    redInfo,
    getPosterUrl
});
</script>

<style lang="scss" scoped>
.hide :deep(.el-upload--picture-card) {
    display: none;
}

.file :deep(.el-upload-list) {
    display: none;
}

.acti_set_box {
    display: flex;
    min-height: 691px;
    background: #fff;

    .form {
        flex: 1;
    }

    .phone_box {
        height: 500px;
        flex: 1;
        display: flex;
        justify-content: center;

        .phone {
            position: relative;
            width: 360px;
            height: 660px;
            margin-bottom: 16px;
            background-size: cover;
            border: 1px solid #eaeaea;

            .default_bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 660px;

                // background: url('@/assets/smartMarketing/order_bg.png');
                // background-size: cover;
                z-index: 1;

                // background-position: 0 46px;
            }

            .title_box {
                position: absolute;
                display: flex;
                align-items: center;
                width: 347px;
                height: 44px;
                padding-left: 11px;
                background: #fff;
                z-index: 3;
                border-radius: 1px;
                border: 1px solid #f5f5f5;

                .title_r {
                    flex: 1;
                    padding-right: 20px;
                    text-align: center;
                }
            }

            .content_box {
                position: relative;
                top: 119px;
                left: 6px;
                width: 340px;
                height: 500px;
                background-image: url('@/assets/smartMarketing/order_red_bg.png');

                // background: url();
                background-size: cover;
                z-index: 9;

                .inp_box {
                    position: absolute;
                    top: 80px;
                    left: 52px;
                    width: 243px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    color: #fff;
                    background: #ed120e;
                    border-radius: 12px;
                }

                .alert_box {
                    position: absolute;
                    top: 200px;
                    left: 70px;
                    width: 210px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    color: #fff;
                    background: rgb(0 0 0 / 60%);
                    border-radius: 8px;
                }

                .btn_box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 339px;
                    left: 134px;
                    width: 76px;
                    height: 45px;
                    padding-left: 3px;
                    font-weight: 600;
                    font-size: 18px;
                    line-height: 22px;
                    color: #fb201c;
                    background-color: #ffd07d;
                }
            }

            .footer {
                position: absolute;
                bottom: 0;
                width: 100%;
                padding: 20px 0 6px;
                display: flex;
                justify-content: center;
                z-index: 1;

                .border {
                    width: 152px;
                    height: 5px;
                    background: #000;
                    border-radius: 3px;
                }
            }
        }

        .position {
            background-position: 0 0;
        }
    }
}

.dia_text {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.file_info {
    display: flex;
    align-items: center;
    font-size: 16px;

    img {
        width: 20px;
        height: 20px;
    }

    .del_icon {
        cursor: pointer;
        margin-left: 5px;
    }
}

.el-form-item {
    .text {
        padding-top: 10px;
        line-height: 1.4;
        font-size: 12px;
        color: #999;
    }
}

img[src=''],
img:not([src]) {
    opacity: 0;
}
</style>
